<template>
	<view v-if="isShow">
		<!-- 需要有点击前显示的小圆点固定在右下角方向，设置 fiexd 离 bottom  -->
		<view class="drag" :style="'bottom:' + (safeAreaBottomHeight + 30) + 'px'" @click="upload">
			<text></text>
		</view>
	</view>
</template>

<script>
	import { getBarIconDistance } from '@/utils/utils.js'
	export default {
		props: {
			// 是否显示上传按钮
			isShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				// 底部适配高度
				safeAreaBottomHeight: 0,
			}
		},
		methods: {
			// 获取底部高度
			getTopIconDistance() {
				this.safeAreaBottomHeight = 0;
				this.safeAreaBottomHeight = getBarIconDistance() + 50;
				console.log(this.safeAreaBottomHeight);
			},
			// 上传方法
			upload(){
				console.log("点击了这里")
				let the = this;
				//从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					count: 1, //允许上传的照片数量,最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success(res) {
						//成功则返回图片的本地文件路径列表 tempFilePaths
						console.log("选择图片成功success");
						console.log(res);
						console.log(JSON.stringify(res.tempFilePaths));
						the.te = res.tempFilePaths[0];
						console.log("拍摄的图片：" + the.te)
						// let file = new FormData();
						// file.append('file', res.tempFilePaths[0]);
						// axios.post('/back/user/file', file, {
						// 	headers: {
						// 		'Content-Type': 'multipart/form-data'
						// 	}
						// })
						// .then(function (response) {
						//     console.log(response);
						//   })
						//获取文件file 
						the.FileUploading(res.tempFilePaths[0]);
				
					},
					fail(res) {
						//接口调用失败的回调函数
						console.log("选择图片失败fail");
						console.log(res);
					},
					complete(res) {
						//接口调用结束的回调函数（调用成功、失败都会执行）
						console.log("选择图片接口调用结束complete");
						console.log(res);
					}
				});
			},
			EnvironmentCheck() {
				//环境检查
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
			
						console.log('运行Android上')
						IsMobile = true;
						break;
			
					case 'ios':
			
						console.log('运行iOS上')
						IsMobile = true;
						break;
			
					default:
			
						console.log('运行在开发者工具上')
			
						break;
				}
			},
			FileUploading(fileData) {
				console.log("文件上传");
				let the = this;
				console.log(fileData);
				//上传图片 
				uni.uploadFile({
					url: 'http://127.0.0.1:9000/image/compare',
					filePath: fileData,
					name: 'file',
					header: {
						'content-type': 'multipart/form-data'
					},
					formData: {
						'storyId': 1,
						'scenicId': 2
					},
					success: (uploadFileRes) => {
						console.log("上传图片:接口调用成功的回调函数********");
						console.log(uploadFileRes);
					},
					fail: function(res) {
						//  接口调用失败的回调函数
						console.log("上传图片:接口调用失败的回调函数********");
						console.log(res)
					},
					complete: function(res) {
						//接口调用结束的回调函数（调用成功、失败都会执行）
						console.log("上传图片:接口调用结束的回调函数（调用成功、失败都会执行）");
						console.log(res)
					}
				});
			
			}
		},
		created() {
			this.getTopIconDistance();
		}
	}
</script>

<style scoped lang="scss">
	.drag {
		position: fixed;
		z-index: 99;
		width: 135rpx;
		height: 135rpx;
		background: var(--text-yellow);
		right: 20rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		text {

			&:before {
				color: var(--white);
				content: "+";
				font-size: 88rpx;
			}
		}
	}
</style>